<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>比赛资讯 | 及第竞赛网</title>
    <link rel="stylesheet" href="../css/first.css"/>
    <link rel="stylesheet" href="../css/font-awesome.min.css">

</head>

<body>
<div class="container" id="news">
    <header class="header">
        <div class="brand">
            <div class="brand-icon">
                <a href="home.html">
                    <span>及第</span>竞赛网
                </a>
            </div>
        </div>
        <nav class="nav">
            <div class="nav-menu">
                <ul>
                    <li class="nav-btn">
                        <a href="home.html">首页</a>
                    </li>
                    <li class="nav-btn">
                        <a href="noticeOfContest.html">比赛公告</a>
                    </li>
                    <li class="nav-btn">
                        <a href="informationOfContest.html">比赛信息</a>
                    </li>
                    <li class="nav-btn">
                        <a href="newsOfContest.html">比赛资讯</a>
                    </li>
                    <!--<li class="nav-btn">-->
                        <!--<a href="">报名</a>-->
                    <!--</li>-->
                </ul>
            </div>
        </nav>
    </header>
    <div class="banner">
        <div class="banner-img">
            <img id="news-img01" src="../img/news01.png" alt="news01">
            <img id="news-img02" src="../img/news02.png" alt="news02">
        </div>
        <div class="banner-switch-left"><span><i class="fa fa-chevron-left"></i></span></div>
        <div class="banner-switch-right"><span><i class="fa fa-chevron-right"></i></span></div>
    </div>
    <section class="content" id="news">
        <section class="section">
            <div class="section-header">
                <div class="section-title">比赛资讯 <span style="color: #7a7a7a;">/ NewsOfContest</span></div>
            </div>
            <div class="section-body">
                <div class="section-list-text">
                    <ul class="list-container"  >
                        <li v-for='news in newslist'>
                            <div class="list-display" >
                                <a href="detailNews.html">
                                    <img v-bind:src="getImgUrl(news.route)" alt="资讯详情">
                                </a>
                            </div>
                            <div class="list-media">
                                <div class="list-header">
                                    <a class="list-title" href="javascript:void(0)" @click="getOneNewsCookie(news.inId)">
                                        {{news.title}}
                                    </a>
                                </div>
                                <div class="list-body">
                                    <a v-html="news.content" style="height: 80px" href="javascript:void(0)" @click="getOneNewsCookie(news.inId)">
                                    </a>
                                </div>
                                <div class="list-footer">
                                    <a href="javascript:return false;">{{news.laName}}</a>
                                    <a href="javascript:return false;">{{news.addtime}}</a>
                                </div>
                            </div>
                        </li>


                    </ul>
                </div>
                <div class="section-btn-group">
                    <ul class="pagination">
                        <li>
                            <a @click="getajax(1)">首页</a>
                        </li>
                        <li>
                            <a @click="getajax(page-1)">上</a>
                        </li>
                        <li>
                        <li v-for="value in showpage">
                            <a style="background: red;" @click="getajax(value)" v-if="page==value">
                                {{value}}
                            </a>

                            <a v-else @click="getajax(value)">{{value}}</a>

                        </li>
                        </li>
                        <li>
                            <a @click="getajax(page+1)">下</a>
                        </li>
                        <li>
                            <a @click="getajax(countpage)">尾页</a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </section>
</div>
<footer class="footer">
    <p>Copyright © 2018-2019 JIDI All rights reserved.</p>
</footer>

<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/axios.min.js"></script>
<script type="text/javascript" src="../js/cookieUtil.js"></script>

<script type="text/javascript">
    var url1 = 'http://donting.free.idcfengye.com';
    var da = new Vue({
        el: '#news',
        data: {
            count: '', //总记录数
            countpage: '10', //总页数
            page: '1', //当前页
            newslist: [],
            showpage: '',


        },
        methods: {

            getOneNewsCookie: function (id) {
                console.log("xxxcookie" + id);
                setCookie('inId', id, 1);
                document.location = "detailNews.html";

            },
            getImgUrl:function(route){
                    return url1+'/getImg?route='+route;
            },

            getajax: function (page) {
                if (page <= 0) {
                    alert("没有上一页");
                    return;
                }
                if (page > this.countpage) {
                    alert("没有下一页了");
                    return;
                }

                axios.defaults.withCredentials = true;

                axios.get(url1 + '/information/findAllPage', {
                    params: {
                        'page': page
                    }
                }).then(function (response) {
                    var rs = response.data;
                    da.countpage = rs.countpage;
                    da.page = rs.page;
                    da.count = rs.count;
                    da.newslist = rs.data;



                    var cout = 0;
                    var pa = [];
                    if (rs.page <= 3) {

                        for (var i = 1; i <= da.countpage && cout < 5; i++) {
                            pa.push(i);
                            cout++;
                        }

                    } else {

                        if (rs.countpage - rs.page >= 2) {
                            pa.push(rs.page - 2);
                            pa.push(rs.page - 1);
                            pa.push(rs.page);
                            pa.push(rs.page + 1);
                            pa.push(rs.page + 2);
                        } else {
                            pa.push(rs.countpage - 4);
                            pa.push(rs.countpage - 3);
                            pa.push(rs.countpage - 2);
                            pa.push(rs.countpage - 1);
                            pa.push(rs.countpage);

                        }

                    }
                    da.showpage = pa;

                }).catch(function (error) {
                    alert("all连接超时！");
                });

            }

        },
        mounted() {
            this.getajax(1);

        }

    })
</script>
</body>

</html>